<template>
  <div class="left-top">
    <TitleItem title="打击" describe="有力护平安" />
    <div class="left-top-content">
      <div class="nav">
        <div class="nav-item" v-for="item in navArr.exponent" :key="item.title">
          <div class="left">
            <img :src="item.imgUrl" alt="" />
            <p>{{ item.title.slice(0, 4) }}</p>
            <p>{{ item.title.slice(4) }}</p>
          </div>
          <div class="right">
            <p class="text1">{{ item.number }}</p>
            <img src="@/assets/image/home/left/xuxian.png" class="xuxian" />
            <div class="common">
              <div class="num">
                <span>同比:</span>
                <span>{{ item.commonNum }}%</span>
              </div>
              <img src="@/assets/image/home/left/up.png" alt="" />
            </div>
            <div class="chain-ratio common">
              <div class="num">
                <span>环比:</span>
                <span>{{ item.ringNum }}%</span>
              </div>
              <img src="@/assets/image/home/left/down.png" alt="" />
            </div>
          </div>
        </div>
        <div
          class="nav-item"
          v-for="item in navArr.dailyAverage"
          :key="item.title"
        >
          <div class="left">
            <img :src="item.imgUrl" alt="" />
            <p>{{ item.title.slice(0, 2) }}</p>
            <p>{{ item.title.slice(2) }}</p>
          </div>
          <div class="right">
            <div class="text1">
              <span class="num">{{ item.number }}</span>
              <span>件</span>
            </div>
            <img src="@/assets/image/home/left/xuxian.png" class="xuxian" />
            <div
              class="common over"
              v-for="aveItem in item.ave"
              :key="aveItem.text"
              :style="{ 'padding-top': item.ave.length === 2 ? '0px' : '8px' }"
            >
              <div class="num">
                <span>{{ aveItem.text }}:</span>
                <span>{{ aveItem.num }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="bottom">
        <div class="bottom-left">
          <div class="header">年度警情分析</div>
          <div class="bar-charts">
            <div id="barchart" style="height: 100%; width: 100%"></div>
          </div>
        </div>
        <div class="bottom-right">
          <div class="header">年度案件分析</div>
          <div style="height: 200px" class="pie">
            <div id="container" style="height: 200px"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import TitleItem from "@/components/titleItem/index.vue";
import * as echarts from "echarts";
import { onMounted, nextTick, onBeforeUnmount, reactive } from "vue";
import Highcharts from "highcharts";

export default {
  name: "LeftTop",
  components: {
    TitleItem,
  },
  setup() {
    // 城市、社区、警情、案件数
    const navArr = reactive({
      // 指数
      exponent: [
        {
          imgUrl: "src/assets/image/home/left/cspazs.png",
          title: "城市平安指数",
          number: 99,
          commonNum: 12, //同比
          ringNum: 11, //环比
        },
        {
          imgUrl: "src/assets/image/home/left/sqxfzs.png",
          title: "社区幸福指数",
          number: 99,
          commonNum: 12, //同比
          ringNum: 11, //环比
        },
      ],
      // 日均
      dailyAverage: [
        {
          imgUrl: "src/assets/image/home/left/rjjqs.png",
          title: "日均警情数",
          number: 943,
          ave: [
            {
              text: "完结率",
              num: "14%",
            },
          ],
        },
        {
          imgUrl: "src/assets/image/home/left/rjajs.png",
          title: "日均案件数",
          number: 102,
          ave: [
            {
              text: "累计抓获人员",
              num: "58",
            },
            {
              text: "破案率",
              num: "87%",
            },
          ],
        },
      ],
    });
    let chartDom = null;
    // 年度晶清分析echarts
    function initBar() {
      const barchart = document.getElementById("barchart");
      chartDom = echarts.init(barchart);
      const option = {
        grid: {
          top: 0,
          left: 60,
          right: 40,
          bottom: 20,
        },
        xAxis: {
          max: "dataMax",
          //分割线是否显示
          splitLine: {
            show: false,
          },
          axisLabel: {
            show: false,
          },
        },
        yAxis: {
          type: "category",
          data: ["治安", "刑事", "民事", "求助", "道路交通", "其他"],
          inverse: true,
          //坐标轴线
          axisLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          axisLabel: {
            color: "rgb(108,254,255)",
            align: "center",
            margin: 30,
            fontFamily: "Source Han Sans CN",
            fontSize: "12px",
          },
        },
        series: [
          {
            type: "bar",
            barWidth: 6,
            data: [6899, 5483, 5009, 4241, 3627, 2731],
            itemStyle: {
              color: "rgb(108,254,255)",
              borderRadius: 90,
            },
            label: {
              show: true,
              color: "rgb(108,254,255)",
              position: "right",
              fontFamily: "DIN Next LT Pro",
              fontSize: "16px",
            },
          },
        ],
        legend: {
          show: true,
        },
      };
      chartDom.setOption(option);
    }
    //圆环（待优化）
    function initHightDepth3D() {
      // 保持vue对象，这个this指向vue实例
      const each = Highcharts.each;
      const round = Math.round;
      const cos = Math.cos;
      const sin = Math.sin;
      const deg2rad = Math.deg2rad;
      Highcharts.wrap(
        Highcharts.seriesTypes.pie.prototype,
        "translate",
        function (proceed) {
          proceed.apply(this, [].slice.call(arguments, 1));
          // 这个this指向hightcharts对象实例
          var series = this,
            chart = series.chart,
            options = chart.options,
            seriesOptions = series.options,
            depth = seriesOptions.depth || 0,
            options3d = options.chart.options3d,
            alpha = options3d.alpha,
            beta = options3d.beta,
            z = seriesOptions.stacking
              ? (seriesOptions.stack || 0) * depth
              : series._i * depth;
          z += depth / 2;
          if (seriesOptions.grouping !== false) {
            z = 0;
          }
          each(series.data, function (point) {
            var shapeArgs = point.shapeArgs,
              angle;
            point.shapeType = "arc3d";
            var ran = point.options.h;
            shapeArgs.z = z;
            shapeArgs.depth = depth * 0.75 + ran;
            shapeArgs.alpha = alpha;
            shapeArgs.beta = beta;
            shapeArgs.center = series.center;
            shapeArgs.ran = ran;
            angle = (shapeArgs.end + shapeArgs.start) / 2;
            point.slicedTranslation = {
              translateX: round(
                cos(angle) * seriesOptions.slicedOffset * cos(alpha * deg2rad)
              ),
              translateY: round(
                sin(angle) * seriesOptions.slicedOffset * cos(alpha * deg2rad)
              ),
            };
          });
        }
      );
      (function (H) {
        H.wrap(
          Highcharts.SVGRenderer.prototype,
          "arc3dPath",
          function (proceed) {
            // Run original proceed method
            var ret = proceed.apply(this, [].slice.call(arguments, 1));
            ret.zTop = (ret.zOut + 0.5) / 100;
            return ret;
          }
        );
      })(Highcharts);
      let options = {
        chart: {
          type: "pie",
          animation: false,
          backgroundColor: "transparent",
          events: {
            load: function () {
              var each = Highcharts.each,
                points = this.series[0].points;
              each(points, function (p, i) {
                p.graphic.attr({
                  translateY: -p.shapeArgs.ran,
                });
                p.graphic.side1.attr({
                  translateY: -p.shapeArgs.ran,
                });
                p.graphic.side2.attr({
                  translateY: -p.shapeArgs.ran,
                });
              });
            },
          },
          options3d: {
            enabled: true,
            alpha: 60,
          },
        },
        title: {
          text: "",
        },
        credits: {
          enabled: false,
        },
        plotOptions: {
          pie: {
            // allowPointSelect: true,
            cursor: "pointer",
            depth: 35,
            innerSize: 60,
            size: "60%",
            dataLabels: {
              distance: "45%",
              connectorPadding: 0,
              connectorShape: "crookedLine",
              crookDistance: "70%",
              useHTML: true,
              formatter: function (e) {
                return `
                <div style="text-align:center">
                <p style='
                color:${this.point.color.replace("0.6", "1")};
                font-size:16px;
                font-family: DIN Next LT Pro;
                font-weight: bold;'>${this.point.y}</p>
                <p style='color:#CBDDFF;font-size:12px;font-family: Source Han Sans CN;'>${
                  this.point.name
                }</p>
                </div>`;
              },
            },
          },
        },
        series: [
          {
            type: "pie",
            name: "",
            data: [
              {
                name: "民事案件",
                y: 3890,
                h: 10,
                color: "rgba(100,254,255,0.6)",
              },
              {
                name: "经济案件",
                y: 6890,
                h: 1,
                color: "rgba(237,178,0,0.6)",
              },
              {
                name: "刑事案件",
                y: 7894,
                h: 17,
                color: "rgba(0,125,255,0.6)",
              },
            ],
          },
        ],
      };
      nextTick(() => {
        Highcharts.chart("container", options);
      });
    }
    onBeforeUnmount(() => {
      // 解决display:none --> display:block 之后图标不在显示的问题
      if (!chartDom) {
        return;
      }
      chartDom.dispose();
      chartDom = null;
    });
    onMounted(() => {
      nextTick(() => initBar());
      initHightDepth3D();
    });
    return {
      navArr,
    };
  },
};
</script>

<style lang="scss" scoped>
.left-top {
  width: 100%;
  &-content {
    width: 100%;
    height: 315px;
    padding-top: 22px;
    .nav {
      margin: 0 22px;
      display: flex;
      justify-content: space-between;
      &-item {
        display: flex;
        .left {
          font-size: 12px;
          color: #fff;
          margin-right: 12px;
          > img {
            width: 54px;
            height: 45px;
          }
          > p {
            text-align: center;
            font-weight: bold;
            line-height: 15px;
          }
        }
        .right {
          .text1 {
            color: #edb200;
            font-family: DIN Next LT Pro;
            font-size: 26px;
            font-weight: bold;
            line-height: 37px;
            > span {
              &:last-child {
                font-size: 12px;
                margin-left: 6px;
              }
            }
          }
          .xuxian {
            width: 68px;
            height: 1px;
            display: block;
            margin-bottom: 8px;
          }
          .common {
            color: #cbddff;
            font-size: 10px;
            .num {
              display: inline-block;
              font-size: 12px;
              > span {
                &:first-child {
                  font-family: Source Han Sans CN;
                }
                &:last-child {
                  font-family: DIN Next LT Pro;
                }
              }
            }
            > img {
              width: 8px;
              height: 8px;
              margin-left: 4px;
            }
          }
        }
      }
    }
    .bottom {
      margin-top: 20px;
      display: flex;
      //临时样式
      padding: 0 22px;
      &-left,
      &-right {
        flex: 1;
      }
      .header {
        width: 150px;
        height: 25px;
        line-height: 25px;
        font-size: 14px;
        font-weight: bold;
        background-color: rgba(46, 116, 227, 0.3);
        color: #fff;
        border-radius: 2px;
        padding-left: 8px;
      }
      &-left {
        margin-right: 25px;
        .bar-charts {
          margin-top: 14px;
          width: 100%;
          height: 150px;
        }
      }
      .pie {
        position: relative;
        top: -26px;
        left: -10px;
      }
    }
  }
}
</style>